<template>
    <el-table
        id="liabilityclassreport-table-liabilityclassreport"
        ref="tableRef"
        :data="tableData"
        v-bind="tableDefaultAttribute"
        row-key="id"
        table-layout="auto"
        :span-method="objectSpanMethod"
    >
        <template #empty>
            <span>无数据</span>
        </template>
        <template v-for="col in tableColumns" :key="col.prop">
            <el-table-column
                v-if="!col.isHidden"
                :align="col.align"
                :prop="col.prop"
                :label="col.label"
                :formatter="col.formatter"
                :type="col.type"
                :fixed="col.fixed"
                :width="col.width"
            >
            </el-table-column>
        </template>
    </el-table>
</template>
<script setup lang="ts" name="LiabilityClassReport">
import { ref, reactive } from 'vue';
import { storeToRefs } from 'pinia';
import { isEmpty } from 'lodash';
import { tableDefaultAttribute, tableColumnDefault } from '@/hooks/useTable';
import { Request } from '@/app/request';
import type { AssetClassReport, BusiReportParam } from '@/common/types/report';
import { SpanMethodProps } from '@/common/types/report';
import { useAppStore } from '@/store/app';
import { transFormatter } from '@/common/tools';
import { TableColumn } from '@/common/types/app';

const tableData = ref<Array<AssetClassReport>>([]);
const { currency, client } = storeToRefs(useAppStore());

const refresh = ref(async (param: BusiReportParam) => {
    const req = new Request('负债类往来明细表', param);
    const r = await req.post();
    tableData.value.length = 0;

    if (!isEmpty(r.obj)) {
        tableData.value = r.obj;
    }
});
const onFormatter = (_row: any, column: any, cellValue: any) => {
    let data: { value: string | number; label: string }[];
    if (column['property'] === 'fee_unit_cod') {
        data = client.value;
    } else if (column['property'] === 'currency_cod') {
        data = currency.value;
    } else {
        return cellValue;
    }

    return transFormatter(cellValue, data);
};
const tableColumns = reactive<TableColumn[]>([
    {
        ...tableColumnDefault,
        order: 1,
        prop: 'fee_typ_cod',
        label: '费用类型',
        formatter: onFormatter,
        width: 120,
    },

    {
        ...tableColumnDefault,
        order: 2,
        prop: 'fee_unit_cod',
        label: '往来单位名称',
        formatter: onFormatter,
        width: 300,
    },
    {
        ...tableColumnDefault,
        order: 3,
        prop: 'currency_cod',
        label: '币种',
        formatter: onFormatter,
        width: 100,
    },

    {
        ...tableColumnDefault,
        order: 4,
        prop: 'pre_surplus',
        label: '上期结余数',
        // formatter: onFormatter,
        formFieldItemType: 'input',
        // optionalValues: currency,
        width: 150,
    },
    {
        ...tableColumnDefault,
        order: 5,
        prop: 'cur_amount',
        label: '本月发生数',
        // formatter: onFormatter,
        formFieldItemType: 'input',
        // optionalValues: currency,
        width: 150,
    },
    {
        ...tableColumnDefault,
        order: 6,
        prop: 'cur_surplus',
        label: '本月结余数',
        // formatter: onFormatter,
        formFieldItemType: 'input',
        // optionalValues: currency,
        width: 150,
    },
]);    
const objectSpanMethod = ({
    row,
    column,
    rowIndex,
    columnIndex,
}: SpanMethodProps<AssetClassReport>) => {
    if (columnIndex === 0) {
        if (
            rowIndex === 0 ||
            row['fee_typ_cod'] !== tableData.value[rowIndex - 1]['fee_typ_cod']
        ) {
            if (rowIndex === tableData.value.length - 1) {
                return {
                    rowspan: 1, colspan: 1,
                }
            }
            let findRowIndex = tableData.value.length - 1;
            
            for (
                let index = rowIndex + 1;
                index < tableData.value.length;
                index++
            ) {
                const element = tableData.value[index];
                if (element.fee_typ_cod !== row.fee_typ_cod) {
                    findRowIndex = index;
                    break;
                }
            }
            let rowspan = ((findRowIndex - rowIndex) === 0) ? 1 : findRowIndex - rowIndex;

            if (findRowIndex === tableData.value.length - 1) {
                if (tableData.value[findRowIndex]['fee_typ_cod'] === row.fee_typ_cod) {
                    rowspan++;
                }
            }
            return {
                rowspan,
                colspan: 1,
            };
        } else {
            return {
                rowspan: 0,
                colspan: 0,
            };
        }
    }
    if (columnIndex === 1) {
        if (
            rowIndex === 0 ||
            row['fee_typ_cod'] !== tableData.value[rowIndex - 1]['fee_typ_cod'] || 
            row['fee_unit_cod'] !== tableData.value[rowIndex - 1]['fee_unit_cod']
        ) {
            if (rowIndex === tableData.value.length - 1) {
                return {
                    rowspan: 1, colspan: 1,
                }
            }
            let findRowIndex = tableData.value.length - 1;
            
            for (
                let index = rowIndex + 1;
                index < tableData.value.length;
                index++
            ) {
                const element = tableData.value[index];
                if (element.fee_typ_cod !== row.fee_typ_cod || element.fee_unit_cod !== row.fee_unit_cod ) {
                    findRowIndex = index;
                    break;
                }
            }
            let rowspan = ((findRowIndex - rowIndex) === 0) ? 1 : findRowIndex - rowIndex;

            if (findRowIndex === tableData.value.length - 1) {
                if (tableData.value[findRowIndex]['fee_typ_cod'] === row.fee_typ_cod && tableData.value[findRowIndex]['fee_unit_cod'] === row.fee_unit_cod ) {
                    rowspan++;
                }
            }
            return {
                rowspan,
                colspan: 1,
            };
        } else {
            return {
                rowspan: 0,
                colspan: 0,
            };
        }
    }
};
defineExpose({
    refresh,
});
</script>

<style lang="scss" scoped>
</style>